<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light shadow">
    <div class="pt-md-3 pb-md-4">
        <h1 class="bd-title mt-0">常用模板</h1>
        <p class="bd-lead">这些模板涵盖了常见的使用场景，预置的布局可以帮助你节约时间。</p>
        <a href="https://github.com/twbs/bootstrap/archive/v4.3.1.zip" class="btn btn-lg btn-bd-primary">下载 bootstrap v4.3.1</a>
    </div>
</header>

<div class="bd-content p-5">
    <h2>自定义组件</h2>
    <p>将组件和模板添加到框架以构建项目。</p>

    <div class="row">
        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/album/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true" src="img/examples/album.png" alt="Album screenshot" width="480" height="300">
                <h5 class="mb-1">相册</h5>
            </a>
            <p class="text-muted">简单的单页模板，用于相册，信息集合等。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/pricing/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/pricing.png" alt="Pricing screenshot" width="480" height="300">
                <h5 class="mb-1">价格表</h5>
            </a>
            <p class="text-muted">使用 card 构建的定价页面，具有自定义页眉和页脚。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/checkout/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/checkout.png" alt="Checkout screenshot" width="480" height="300">
                <h5 class="mb-1">购物车</h5>
            </a>
            <p class="text-muted">自定义结帐表单，使用 bootstrap 4 表单组件及其验证功能。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/product/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true" src="img/examples/product.png" alt="Product screenshot" width="480" height="300">
                <h5 class="mb-1">产品页</h5>
            </a>
            <p class="text-muted">电商最爱</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/cover/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/cover.png" alt="Cover screenshot" width="480" height="300">
                <h5 class="mb-1">自适应单页</h5>
            </a>
            <p class="text-muted">用于构建简单美观主页的单页模板。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/carousel/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/carousel.png" alt="Carousel screenshot" width="480" height="300">
                <h5 class="mb-1">Carousel</h5>
            </a>
            <p class="text-muted">自定义导航栏和轮播，然后添加一些新组件。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/blog/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/blog.png" alt="Blog screenshot" width="480" height="300">
                <h5 class="mb-1">博客</h5>
            </a>
            <p class="text-muted">博客模板，包含标题，导航，精选内容。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/dashboard/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/dashboard.png" alt="Dashboard screenshot" width="480" height="300">
                <h5 class="mb-1">控制台</h5>
            </a>
            <p class="text-muted">带有固定侧边栏和导航栏。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/sign-in/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/sign-in.png" alt="Sign-in screenshot" width="480" height="300">
                <h5 class="mb-1">登陆页</h5>
            </a>
            <p class="text-muted">自定义表单布局和设计，用于简单的登录表单。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/sticky-footer/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/sticky-footer.png" alt="Sticky footer screenshot" width="480" height="300">
                <h5 class="mb-1">粘性页脚</h5>
            </a>
            <p class="text-muted">页面内容很短时，将页脚附加到网页底部。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/sticky-footer-navbar/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/sticky-footer-navbar.png" alt="Sticky footer navbar screenshot" width="480" height="300">
                <h5 class="mb-1">粘性页脚和导航栏</h5>
            </a>
            <p class="text-muted">使用固定的顶部导航栏，并将页脚附加到网页的底部。</p>
        </div>
    </div>


    <h2>框架</h2>
    <p>使用 Bootstrap 提供的内置组件的示例。</p>

    <div class="row">
        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/starter-template/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/starter-template.png" alt="Starter template screenshot" width="480" height="300">
                <h5 class="mb-1">入门模板</h5>
            </a>
            <p class="text-muted">基本的空白模板</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/grid/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/grid.png" alt="Grid screenshot" width="480" height="300">
                <h5 class="mb-1">栅格系统</h5>
            </a>
            <p class="text-muted">栅格布局的多个例子，包含所有四个层，嵌套等。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/jumbotron/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/jumbotron.png" alt="Jumbotron screenshot" width="480" height="300">
                <h5 class="mb-1">霸屏</h5>
            </a>
            <p class="text-muted">使用导航栏和一些基本栅格。</p>
        </div>
    </div>


    <h2>导航栏</h2>
    <p>采用默认导航栏组件，并展示如何移动，放置和扩展它。</p>

    <div class="row">
        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/navbars/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/navbars.png" alt="Navbars screenshot" width="480" height="300">
                <h5 class="mb-1">导航栏</h5>
            </a>
            <p class="text-muted">展示导航栏的所有响应和容器选项。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/navbar-static/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/navbar-static.png" alt="Navbar static screenshot" width="480" height="300">
                <h5 class="mb-1">静态导航栏</h5>
            </a>
            <p class="text-muted">静态顶部导航栏的单个导航栏例子以及一些其他内容。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/navbar-fixed/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/navbar-fixed.png" alt="Navbar fixed screenshot" width="480" height="300">
                <h5 class="mb-1">动态导航栏</h5>
            </a>
            <p class="text-muted">带有固定顶部导航栏的单个导航栏示例以及一些其他内容。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/navbar-bottom/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true"  src="img/examples/navbar-bottom.png" alt="Navbar bottom screenshot" width="480" height="300">
                <h5 class="mb-1">底部导航栏</h5>
            </a>
            <p class="text-muted">带有底部导航栏的单个导航栏示例以及一些其他内容。</p>
        </div>
    </div>


    <h2>实验性模板</h2>
    <p>专注于未来友好功能或技术的例子。</p>

    <div class="row">
        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/floating-labels/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true" src="img/examples/floating-labels.png" alt="Floating labels screenshot" width="480" height="300">
                <h5 class="mb-1">浮动标签</h5>
            </a>
            <p class="text-muted">漂亮简单的表单，在输入上有浮动标签。</p>
        </div>



        <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
            <a href="https://getbootstrap.com/docs/4.2/examples/offcanvas/" target="_blank">
                <img class="img-thumbnail mb-3" data-dl-root="true" src="img/examples/offcanvas.png" alt="Offcanvas screenshot" width="480" height="300">
                <h5 class="mb-1">画布</h5>
            </a>
            <p class="text-muted">将可展开的导航栏变为滑动的画布菜单。</p>
        </div>
    </div>
</div>
